<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品分类</title>
</head>
<body>
<style>
     #div1{
         border: 1px solid red ;
         color: #fff;
         background-color: #C00;
         font-size: 22px;
         font-weight: bold;
         text-indent: 1em;
         line-height: 45px;
         background-image: url("img/arrow-down.gif");
         background-repeat: no-repeat;
         background-position:230px 18px ;
     }
     #divall{
         background-color: #D7D7D7;
         width: 260px;
     }
     ul{
         list-style: none;
         width: 260px;
     }
     ul >li{
         line-height: 30px;
         background-image: url("img/arrow-right.gif");
         background-repeat: no-repeat;
         background-position:200px 5px ;
     }
     a{
         color: black;
         text-decoration: none;
     }
     a:hover{
         color: blue;
     }
</style>
<div id="divall">
    <div id="div1">全部商品分类 </div>
    <ul>
        <li><a href="#">图书 音箱 数字商品</a></li>
        <li><a href="#">家用电器 手机 数码</a></li>
        <li><a href="#">电脑 办公</a></li>
        <li><a href="#">家居 家装 厨具</a></li>
        <li><a href="#">服饰鞋帽 个护化妆</a></li>
        <li><a href="#">礼品箱包 钟表 珠宝</a></li>
        <li><a href="#">食品饮料 保健食品</a></li>
        <li><a href="#">彩票 旅行 充值 票务</a></li>
    </ul>
</div>
</body>
</html>